<template>
	<div id="history">
		<!-- <div id="history_head">
			<a href="javascript:history.go(-1)"><img src="/static/imgm/headBack.jpg"></a>
			<span>浏览历史</span>
			<a href="#"><img src="/static/imgm/line.jpg"></a>
		</div> -->
		<my-header :mmm='msg'></my-header>
		<div v-if="!showstate">
			<div id="history_main">
				<img src="/static/imgm/img5/browseEmpty.png">
				<p>暂无浏览历史记录，快去看看有没有心意的美酒吧！</p>
			</div>
			<div id="history_foot">
				<router-link to="/home">先去逛逛</router-link>
			</div>
		</div>
		<div class="main" v-if="showstate">
			<ul>
				<li v-for="l in list">
					<img :src="l.proImg"/>
					<p>{{l.proName}}</p>
				</li>
			</ul>
		</div>
		
	</div>
</template>

<script>
import myHeader from './Header'
	export default{
		data(){
			return{
				list : [],
				msg : '浏览历史'
			}
		},
		mounted(){
			this.list = this.$store.state.historys
			console.log(this.list)
		},
		computed:{
			showstate(){
				let i = 0;
				for( var k in this.list){
					i++;
				}
				return i>0?true:false;
			}
		},
		components : {
			myHeader
		}
	}
</script>

<style scoped>
.main li{
	display: inline-block;
	width: 50%;
	padding: .5rem;
}
#history{
	display: flex;
	flex-direction: column;
	margin-top: 1rem;
}

#history_main{
	margin-top: 2.29rem;
}
#history_main img{
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto;
}
#history_main p{
	padding-top: .662rem;
	width: 590px;
	color: #999;
	font-size:25px ;
	margin: 0 auto;
	}
	#history_foot{
		background: #e84c3d;
		width:80%;
		height: 1.05rem; 
		margin: 0 auto;
		border-radius: 0.156rem;
		margin-top: 1.562rem;
		color: #fff;
		text-align: center;
		line-height: 1.05rem;
		font-size: .3rem;
		/*margin-left: 15%;*/
	}
	#history_foot a{
		opacity: 0.9;
		color: #fff;
		font-weight: bold;
		font-size: 32px;
	}
</style>